<script setup lang="ts">
import { inject, ref, type Ref } from "vue";

// 子子组件
// 2. inject 函数类似鸿蒙的 @Consume 装饰器，后代组件接收数据
const totalCount = inject<Ref<number>>("totalCount", ref(0));
const updateTotalCount = inject("updateTotalCount", (num: number) => {});
</script>

<template>
  <div class="box">
    <h3>后代{{ totalCount }}</h3>
    <button @click="totalCount++">后代修改+1</button>
    <button @click="updateTotalCount(10)">调整回调函数+10</button>
  </div>
</template>

<style scoped>
.box {
  border: 1px solid blue;
}
</style>
